<template>
  <div id="StoreMange">
    <div class="box">
      <div class="box_header">
        <div>店铺管理</div>
        <div>
          <el-button type="success" @click="handleSave" v-show="msgFour">保存</el-button>
          <el-button type="primary" v-if="msgFive" @click="handleEdit" v-show="!msgFour">编辑</el-button>
          <el-button type="primary" disabled v-if="!msgFive">编辑</el-button>
          <!-- <el-button type="success" @click="handleSave" disabled v-if="!msgFour">保存</el-button> -->
        </div>
      </div>
      <el-form :disabled="msgBox">
        <div class="box_body">
          <!-- 店铺名称 -->
          <div>
            <div style="width:5vw"><span>店铺名称</span></div>
            <div style="width:78vw">
              <el-input style="width:78vw;height: 1.5vw;font-size: 0.9vw;" v-model="StoreName" />
            </div>
          </div>
          <!-- 店铺公告 -->
          <div>
            <div style="width:5vw"><span>店铺公告</span></div>
            <div style="width:78vw">
              <el-input style="width:78vw;height: 2vw;font-size: 0.9vw;" :rows="2" type="textarea"
                v-model="StoreBulletin" class="textA" />
            </div>
          </div>
          <br>
          <!-- 店铺头像 -->
          <div>
            <div style="width:5vw"><span>店铺头像</span></div>
            <div>
              <!-- <img :src="'http://127.0.0.1:5000/upload/shop/' + StoreAvatar" alt="" class="logo_img"> -->
              <img src="../../images/logo.jpeg" alt="" class="logo_img">
            </div>
          </div>
          <!-- 店铺图片 -->
          <div class="storeImg">
            <div>店铺图片</div>
            <div>
              <el-upload v-model:file-list="fileList" action="http://127.0.0.1:5000/shop/upload"
                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                :on-success="handleAvatarSuccess">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="'http://127.0.0.1:5000/upload/shop/' + dialogImageUrl" alt="图片预览" />
              </el-dialog>
            </div>
          </div>
          <!-- 配送费 -->
          <div>
            <div style="width:5vw"><span>配送费</span></div>
            <div style="width:78vw">
              <el-input style="width:78vw;height: 1.5vw;font-size: 0.9vw;" v-model="StoreDeliveryPrice" />
            </div>
          </div>
          <!-- 配发时间 -->
          <div>
            <div style="width:5vw"><span>配发时间</span></div>
            <div style="width:78vw">
              <el-input style="width:78vw;height: 1.5vw;font-size: 0.9vw;" v-model="StoreDeliveryTime" />

            </div>
          </div>
          <!-- 配送描述 -->
          <div>
            <div style="width:5vw"><span>配送描述</span></div>
            <div style="width:78vw">
              <el-input style="width:78vw;height: 1.5vw;font-size: 0.9vw;" v-model="StoreDescription" />

            </div>
          </div>
          <!-- 店铺评分 -->
          <div>
            <div style="width:5vw"><span>店铺评分</span></div>
            <div style="width:78vw">
              <el-input style="width:78vw;height: 1.5vw;font-size: 0.9vw;" v-model="StoreScore" />
            </div>
          </div>
          <!-- 销量 -->
          <div>
            <div style="width:5vw"><span>销量</span></div>
            <div style="width:78vw">
              <el-input style="width:78vw;height: 1.5vw;font-size: 0.9vw;" v-model="StoreSellCount" />
            </div>
          </div>
          <!-- 活动 -->
          <div>
            <div style="width:5vw"><span>活动</span></div>
            <div>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
                  {{ city }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- 营业时间 -->
          <div>
            <div style="width:5vw"><span>营业时间</span></div>
            <div style="width:78vw;">
              <el-time-picker v-model="valueTime" is-range range-separator="To" start-placeholder="Start time"
                end-placeholder="End time" />
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
//引入商店图片
import type { UploadProps, UploadUserFile } from 'element-plus'
//引入店铺详情接口方法
import { fetchLoginFourteen } from '../../api/index'
//引入店铺修改接口
import { fetchLoginFifteen } from '../../api/index'

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  //console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (e) => {
  //dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

onMounted(async () => {
  //获取店铺详情信息
  const res = await fetchLoginFourteen();
  //console.log(res);
  StoreId.value = res.data.data.id;
  StoreName.value = res.data.data.name;
  StoreBulletin.value = res.data.data.bulletin;
  StoreAvatar.value = res.data.data.avatar;
  StoreDeliveryPrice.value = res.data.data.deliveryPrice;
  StoreDeliveryTime.value = res.data.data.deliveryTime;
  StoreDescription.value = res.data.data.description;
  StoreScore.value = res.data.data.score;
  StoreSellCount.value = res.data.data.sellCount;
  checkedCities.value = res.data.data.supports;
  valueTime.value = res.data.data.date;
  //此处需要使用map循环并修改解fileList为对应的格式 -- !
  fileList.value = res.data.data.pics.map((picName: any) => ({ name: picName, url: 'http://127.0.0.1:5000/upload/shop/' + picName }))
})

//@ts-check
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  //console.log(response.imgUrl);//拿到上传的图片具体信息
  //console.log(fileList.value[fileList.value.length-1].response.imgUrl)
  //console.log(fileList.value[fileList.value.length-1]);

  MyTrueImgName.value = response.imgUrl;
  //以确定pice拿的是raw.name,所以在下方进行修改，强逼它拿最外层name(容易获取)
  fileList.value[fileList.value.length - 1].name = response.imgUrl;//时imgUrl不是imageUrl,和组件的不一样
  //console.log(fileList.value);

}

//数据inp联动绑定 -- 声明
const StoreId = ref('');//店铺id
const StoreName = ref('');//店铺名字
const StoreBulletin = ref('');//店铺名字
const StoreAvatar = ref('');//店铺头像
const StoreDeliveryPrice = ref('');//配送费
const StoreDeliveryTime = ref('');//配送费
const StoreDescription = ref('');//配送描述
const StoreScore = ref('');//店铺评分
const StoreSellCount = ref('');//销量
//hard
const checkedCities = ref([]);//活动选择框
const valueTime = ref<[Date, Date]>([]);//营业时间
//lunacr
const fileList = ref<UploadUserFile[]>([])

//选项框
const isIndeterminate = ref(true)
//const checkedCities = ref(['VC无限橙果汁全场8折', '单人精彩套餐'])
const cities = ['在线支付满28减5', 'VC无限橙果汁全场8折', '单人精彩套餐', '特价饮品8折抢购', '单人特色套餐']

const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}

//商店图片
// const fileList = ref<UploadUserFile[]>([])
//console.log(fileList);
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

//时间选择器
// const valueTime = ref<[Date, Date]>([
//   new Date(2016, 9, 10, 8, 40),
//   new Date(2016, 9, 10, 9, 40),
// ])

//--------------------------------------------------------------------------------------------


//--------------------------------------------------------------------------------------------

//修改商铺详情数据
const MyTrueImgName = ref('');
const handleSave = async () => {
  interface IUserInfo {
    id: string,
    name: string,
    bulletin: string,
    avatar: string,
    deliveryPrice: string,
    deliveryTime: string,
    description: string,
    score: string,
    sellCount: string,
    //？？？
    supports: string[],
    date: [Date, Date],
    pics: string[],
  }

  // 将 fileList 转换为文件名数组
  const pics: string[] = fileList.value.map(file => file.name);
  //console.log(pics);

  //console.log(pics[pics.length-1]);

  //现在上面的success方法中获取当前已被转换过的图片名称，在复制到这里来,MyTrueImgName是全局的响应式数据
  // if(pics.length>=5){
  //     pics[pics.length-1] = MyTrueImgName.value;
  //     console.log(pics);
  // }

  // 构造请求参数
  const userInfo: IUserInfo = {
    id: StoreId.value,
    name: StoreName.value,
    bulletin: StoreBulletin.value,
    avatar: StoreAvatar.value,
    deliveryPrice: StoreDeliveryPrice.value,
    deliveryTime: StoreDeliveryTime.value,
    description: StoreDescription.value,
    score: StoreScore.value,
    sellCount: StoreSellCount.value,
    //这里要加JSON.stringify吃力数组为字符串,否则格式错误
    supports: JSON.stringify(checkedCities.value),
    date: JSON.stringify(valueTime.value),
    pics: JSON.stringify(pics),
  };
  const res = await fetchLoginFifteen(userInfo);
  location.reload();
  //console.log(res);
}

//权限管理
//管理员权限配置
const MyUserGroup = ref(sessionStorage.getItem('MyUserGroup'))
//console.log(MyUserGroup.value);

const msgBox = ref(true);//控制是否可编辑编辑
const msgFive = ref(true);//编辑按钮的权限
const msgFour = ref(false);//保存按钮
//console.log(MyUserGroup.value);
if (MyUserGroup.value === '超级管理员') {
  msgFive.value = true;
} else {
  msgFive.value = false;
}

//编辑效果
function handleEdit() {
  msgBox.value = false;
  msgFour.value = !msgFour.value;
}
</script>

<style scoped>
.box {
  width: 85vw;
  margin-left: 1vw;
  box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw #f0f0f0;
}

.box_header {
  padding: 1vw;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.box_body {
  padding: 1vw;

  >div {
    font-size: 0.9vw;
    margin-top: 1vw;
    display: flex;

    >.textA {
      position: relative;
      top: 1vw;
    }

    >div:nth-child(1) {
      width: 5vw;
    }
  }
}

.logo_img {
  width: 6vw;
  height: 6vw;
}
</style>